<template>
  <div class="statusColor">
    <div class="statusItem">
      <span class="block" style=" border: 2px solid #1AD175;"/>
      <span>生产/Run</span>
    </div>
    <div class="statusItem">
      <span class="block" style=" border: 2px solid #EC4014;"/>
      <span>报警/Alarm</span>
    </div>
    <div class="statusItem">
      <span class="block" style=" border: 2px solid #FFDD20;"/>
      <span>停机/Stop</span>
    </div>
    <div class="statusItem">
      <span class="block" style=" border: 2px solid #959595;"/>
      <span>断网/Network Failure</span>
    </div>
    <div class="statusItem">
      <span class="block" style=" border: 2px solid #3F8EDD;"/>
      <span>空闲/Idle</span>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.statusColor {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding:8px 12px;
  display: flex;
  border-bottom: 1px solid #333;
  font-size: 14px;
  .statusItem {
    display: flex;
    align-items: center;
    margin-right: 20px;
    .block {
      width: 14px;
      height: 14px;
      margin-right: 4px;
      background-color: #F4F4F4;
    }
  }
}
</style>
